<script setup lang="ts">
import { useNotification, NButton } from 'naive-ui';
import { defineProps, defineEmits } from 'vue';

const notification = useNotification()

//接收props
const props = defineProps({
    messageCount: {
        type: Number,
        default: 0
    },
    messages: {
        type: Array,
        default: []
    }
})

// 定义触发的事件  
const emit = defineEmits(['update:messageCount', 'update:messages']);

// 减少消息数量  
function decrementMessageCount() {
    // 触发 update:messageCount 事件，通知父组件更新 messageCount  
    emit('update:messageCount', props.messageCount - 1);
    emit('update:messages', props.messages.slice(1));
}

const showNotifications = () => {
    if (props.messageCount <= 0) return;
    props.messages.slice(0, 3).forEach((message: any) => {
        notification.info({
            ...message,
            onClose: () => {
                decrementMessageCount();
            },
        });
    })
}
</script>

<template>
    <n-button size="tiny" :bordered="false" type="success" circle @click="showNotifications">
        <slot></slot>
    </n-button>
</template>

<style scoped></style>
